<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css文本</title>
   <style>
       /* test text-indent attributes*/
        /* p{
            text-indent:-5em;
            padding-left: 5em;
        } */
        /* 测试百分比值 */
        /* div{
            background-color: blanchedalmond;
            width: 500px;
        }
        p{
            text-indent: 20%;
        } */
        /* 测试继承 */
        /* div#outer{
            width:500px;
            background-color: blanchedalmond;
        }
        div#inner{
            text-indent: 10%;
            background-color: cadetblue;
        }
        p{
            width:200px;
            background-color: chartreuse;
        } */
        /* 文本装饰 */
        a{
            text-decoration: line-through;
        }

        p{
            white-space: pre;
        }

        /* <!-- css字体 --> */
        p.normal {font-style:normal;}
        p.italic {font-style:italic;}
        p.oblique {font-style:oblique;}

        p.variant0{
            font-variant: normal;
        }
        p.variant1{
            font-variant: small-caps;
        }
        p.variant2{
            font-variant: initial;
        }
        p.variant3{
            font-variant: inherit;
        }
        p.variant4{
            font-variant: unset;
        }
   </style>
</head>
<body>
    <!-- <p>test text-indent</p> -->

    <!-- <div><p>this is a paragraph.</p></div> -->

    <div id="outer">
        <div id="inner">
            <p>this is a paragraph.</p>
        </div>
    </div>

    <a href="https://baidu.com">lalalalallalala</a>

    <p>双      双         特别      厉
        
        害！</p>

    <!-- css字体 -->
    <p class="italic">italic是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观</p>
    <p class="oblique">oblique文本则是正常竖直文本的一个倾斜版本</p>
    <p class="normal">通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。</p>

    <p class="variant0">font-variant 属性可以设定小型大写字母。
        小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
    </p>
    <p class="variant1">font-variant: small-caps</p>
    <p class="variant2">font-variant: initial</p>
    <p class="variant3">font-variant: inherit</p>
    <p class="variant4">font-variant: unset</p>
</body>
</html>